<template>
<div style="padding-left:35px;">
    
    <div class="comment_wrap">

        <div class="comment_item" v-for="(item,index) in commentChild" :key="index">
        
            <div class="info">
                <div class="cover">
                    <b style="color:#fb7299">||</b>  
                    <img :src="item.userinfo.user_img" alt="" v-if="item.userinfo&&item.userinfo.user_img">
                    <img src="@/assets/cover.jpg" alt="" v-else>
                </div>
                <p class="nickname" v-if="item.userinfo"> {{item.userinfo.name}}</p>
                <p class="nickname" v-else> 匿名用户</p>
                <p class="createTime">{{item.comment_date}}</p>
            </div>

                <div class="content" v-if="!temp">
                    {{item.comment_content}}
                    <span class="publish"  @click="postitemcomment(item.comment_id)">回复</span>
                    
                </div>
                <div class="content" v-else>
                    回复
                    
                    <span style="color:blue" 
                        v-if="item.parent_user_info" 
                        >
                            @{{item.parent_user_info.name}}
                        </span>：
                    {{item.comment_content}}
                    <span class="publish"  @click="postitemcomment(item.comment_id)">回复</span>
                    
                </div>



            <!-- 组件递归，在这个for循环里面再循环当前页面这个组件 -->
            <!-- 目前来说，可以看作这是一个父组件，然后调用当前页面，这里用父子组件传值给子组件传了一个当前for循环的 item.child 数据 -->
            <div class="digui" >
                <comment-item  @postchild="postchildfn" :commentChild="item.child" style="padding-left:0px;" :temp='true'></comment-item>
            </div>

        </div>
        

      

    </div>

</div>
</template>

<script>

   

export default {
    data() {
        return {
           
        };
    },
    name:"commentItem",
    props:['commentChild','temp'],

    methods: {

       postitemcomment(id){
            // console.log("item:"+id);

            this.$emit("postPublish",id)
           
       },

       postchildfn(id){
           this.postitemcomment(id)
           this.$emit('postPublish',id)
       }


    },

    components:{
        
    }


    }
</script>


<style scoped lang="less">



     .comment_item{
       background-color: #fff;
       border-bottom: 0.533vw solid #fb7299;
       padding-bottom: 4vw;
       padding-top: 2.667vw;

       display: flex;
       flex-direction: column;

       .info{
           display: flex;
           height: 10.667vw;
           width: 100%;
           justify-content: center;
           align-items: center;
           background-color: #fff;

           .cover{
               flex: 1;
               display: flex;
               justify-content: center;
                align-items: center;
                
               img{
                   width: 10.133vw;
                    height: 10.133vw;
                    border-radius: 50%;
               }
           }
           .nickname{
               flex: 4;
               font-size: 5.333vw;
               margin: 0;
               font-weight: 570;
           }

           .createTime{
               flex: 1;
               font-size: 4.8vw;
               color: #747474;
           }
       }

       .content{
           font-size: 3.467vw;
           padding-right: 2.133vw;
           text-indent: 1em;
           position: relative;
           padding-left: 15px;
           font-size: 16px;
           padding-right: 80px;
           flex-wrap: wrap;

            .publish{
                color: red;
                position: absolute;
                right:0;
                font-size: 18px;
                padding-right: 30px;
            }   
       }
   }


</style>